Django’s forms (previously knows as newforms) framework has a lot cool functionality including the ability to output label tags. So, instead of typing the complete label and setting the correct for, you can just do form.field_name.label_tag and everything else is taken care of for you. The only problem is that there is no easy, documented way of adding an indicator (e.g. *) for required fields. One way would be to do if’s on each field and manually add an asterisk in the template, but that’s not DRY. After some search a few weeks ago I found an interesting post by Adil Saleem that showed one way of easily accomplishing this without changing all of your templates.

I really liked Adil’s solution, but I also wanted to change the class on the label so I could make those fields stand out (through CSS), and I also realized that he was really creating a python decorator, but in a weird way. So, here is a revised version of his solution with a slightly different approach (overriding label_tag instead of __init__) that adds the required field indicator and specifies a special CSS class (“required”) through a python decorator.

First we define two functions.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
from django.utils.html import escape

def add_required_label_tag(original_function):
  """Adds the 'required' CSS class and an asterisks to required field labels."""
  def required_label_tag(self, contents=None, attrs=None):
    contents = contents or escape(self.label)
    if self.field.required:
      if not self.label.endswith(" *"):
        self.label += " *"
        contents += " *"
      attrs = {'class': 'required'}
    return original_function(self, contents, attrs)
  return required_label_tag

def decorate_bound_field():
  from django.forms.forms import BoundField
  BoundField.label_tag = add_required_label_tag(BoundField.label_tag)

The first function is a decorator that provides the functionality and the second function assigns this decorator to BoundField.label_tag. The second function is really a helper function that allows you to easily add this to all your form modules.

Add the above code to one of your library files (maybe project.forms.__init__.py) and then in the module that defines your forms add the following code.

1
2
from project.forms import decorate_bound_field
decorate_bound_field()

Other than this you need to define the “required” CSS class.

1
label.required { font-weight: bold; }

Refresh your page with the form and all of your required fields will have an asterisk and the labels will be bold. Credit goes to Adil Saleem for coming up with the initial version, this is just a refinement 🙂

Back to blog...